import * as React from 'react';
import {Form, Select, Upload, Icon} from 'antd';
import {FormLocalProps} from '../../interface/component';

const Option = Select.Option;
const FormItem = Form.Item;


const generator = ({defaultProps, defaultRules, fileList, initialValue, label, selectList, name, Component}: any) => {
    return class BaseItemComponent extends React.Component<FormLocalProps, any> {
        public render() {
            const {getFieldDecorator} = this.props.form;
            const propsStyle = this.props.style || {};
            const tabStyle = {marginRight: 25, marginBottom: 15};
            const options = {
                rules: defaultRules,
                initialValue: initialValue || ''
            };

            // 下拉选择
            if (typeof Component === 'string' && Component === 'Select') {
                return (
                    <FormItem key={name} label={label} style={tabStyle}>
                        {getFieldDecorator(name, options)(
                            <Select {...defaultProps} style={{width: 150, ...propsStyle}}>
                                {selectList.map((val: any) => {
                                    return (
                                        <Option key={val.value} value={val.value}>
                                            {val.name}
                                        </Option>
                                    )
                                })}
                            </Select>
                        )}
                    </FormItem>
                )
            }

            if (typeof Component === 'string' && Component === 'Upload') {
                return (
                    <FormItem key={name} label={label} style={tabStyle}>
                        <Upload
                            action={defaultProps.action}
                            listType="picture-card"
                            fileList={fileList}
                            onChange={defaultProps.handleChange}
                        >
                            {fileList.length >= (defaultProps.maxLength || 2) ? null : (
                                <div>
                                    <Icon type="plus"/>
                                    <div className="ant-upload-text">上传</div>
                                </div>
                            )}
                        </Upload>
                    </FormItem>
                )
            }

            // 正常的输入框
            return (
                <FormItem key={name} label={label} style={tabStyle}>
                    {getFieldDecorator(name, options)(
                        <Component style={propsStyle} {...defaultProps} />
                    )}
                </FormItem>
            )
        }
    }
}

let Items: any = {};

export default function dataFormTab(dataForm: any[]) {
    Items = {};

    dataForm.map(({key, props = {}, fileList = [], rules = [], initialValue, selectList = [], Component, label = ''}: any) => {
        Items[key] = generator({
            defaultProps: props,
            defaultRules: rules,
            name: key,
            label,
            initialValue,
            selectList,
            fileList,
            Component
        });
    });

    return Items;
};


